<template>
  <v-content v-show="JSON.stringify(data.profile) != '{}'">

    <v-miaoScroll  id="mydetail" :on-refresh="data.onRefresh" :on-getmore="data.onGetmore" :has-next="data.has_next" :showview="data.showview" v-vuet-scroll="{ path: 'userpage', name: 'content' }" style="background-color: #ffffff;">
      <div  class="mw-column-style">
        <div id="user_rect" class="mw-column-center-style" style="width: 3.75rem;height:3rem;background-color: #FFCF0F">
          <img style="height:0.8rem;width: 0.8rem;border-radius: 0.4rem;object-fit: cover;margin-bottom:0.08rem;margin-top:0.3rem"  :src="data.profile.avatar == ''? '/static/defalut_avatar.png':data.profile.avatar "></img>
          <div class="mw-single-line mw-first-text-color" style="font-weight:bold;font-size: 0.2rem;width:2rem;text-align: center;margin-bottom:0.06rem">{{data.profile.name}}</div>
          <div class="mw-n-line mw-first-text-color" style="-webkit-line-clamp:3;width: 3.15rem;text-align: center;font-size: 0.13rem;margin-bottom:0.15rem;">{{data.profile.introduce}}</div>
          <div style="margin-bottom: 0.2rem;">
            <div @click.stop="data.follow(data.profile.id)" v-if="data.profile.followed == 0" class="mw-unfocus-button-second-style">关注</div>
            <div @click.stop="data.follow(data.profile.id)" v-else-if="data.profile.followed == 1" class="mw-focus-button-second-style">已关注</div>
            <div @click.stop="data.follow(data.profile.id)" v-else-if="data.profile.followed == 2" class="mw-focuseach-button-second-style">互相关注</div>
          </div>

          <!--<div @click="data.follow(data.profile.id)" style="margin-bottom: 0.2rem;"-->
               <!--:class="data.profile.followed == 0? 'mw-unfocus-button-style':'mw-focus-button-style'">-->
            <!--{{data.profile.followed == 0 ? '关注' : '已关注'}}-->
          <!--</div>-->
          <div class="mw-row-spacebetween-style" style="align-items:center;">
            <div class="mw-column-style" style="margin-right: 0.3rem;align-items: center;width: 0.4rem;">
              <div @click="data.skipToFansfollowslist(0)" class="mw-first-text-color" style="font-size: 0.15rem;margin-bottom:0.04rem">{{data.profile.follows_total}}</div>
              <div style="font-size: 0.11rem;color:rgba(0,0,0,0.4)">关注</div>
            </div>
            <div class="mw-vertical-divider"style="height:100%;"></div>
            <div class="mw-column-style" style="margin-left: 0.3rem;align-items: center;width: 0.4rem;">
              <div @click="data.skipToFansfollowslist(1)" class="mw-first-text-color" style="font-size: 0.15rem;margin-bottom:0.04rem">{{data.profile.fans_total}}</div>
              <div style="font-size: 0.11rem;color:rgba(0,0,0,0.4)">粉丝</div>
            </div>
          </div>
        </div>
        <div class='topcategoryfollow'>
          <div class='mw-row-style' style='justify-content:center;background-color:#ffffff;height:0.44rem;width:3.75rem;align-items:center;'>
            <div v-for="(item,index) in data.topcategory">
              <div @click="data.changeCategory(item.id)" class='mw-column-style' style='width:0.55rem;height:0.44rem;align-items:center;justify-content: center'>
                <div class="mw-single-line" :class="[item.checked? 'mw-checked' : 'mw-unchecked']" style='z-index:1;width:0.5rem;text-align: center'>{{item.name}}</div>
                <div style="height:0.05rem;width:0.38rem;margin-top:-0.04rem" :style="{backgroundColor:item.checked? '#ffc421' : '#ffffff'}"></div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="data.topid == 0" class="mw-row-spacebetween-style" style="width: 3.55rem;margin-left:0.1rem">
          <div class="mw-column-style">
            <div   v-for="(item,index) in data.list" v-if="index%2==0">
              <v-noteblockitem   :item="item" enter="userpage" ></v-noteblockitem>
            </div>
          </div>
          <div class="mw-column-style">
            <div  v-for="(item,index) in data.list" v-if="index%2==1">
              <v-noteblockitem   :item="item" enter="userpage"></v-noteblockitem>
            </div>
          </div>
        </div>
        <div v-if="data.topid == 1" @click.stop="data.skipToSaleDetail(item,index)" v-for="(item,index) in data.list">
          <v-saleitem @receiveClickBuy="data.skipClickBuy" :sale="item" ></v-saleitem>
        </div>
        <div v-if="data.topid == 2" v-for="(item,index) in data.list">
          <v-articleitem enter="userpage" :detail="item" ></v-articleitem>
        </div>
      </div>
    </v-miaoScroll>
    <!--<div style="height:11rem;background-color: #7e8c8d"></div>-->
    <div v-if="menushow" class='topcategory'>
      <div class='mw-row-style' style='z-index:97;justify-content:center;background-color:#ffffff;height:0.44rem;width:3.75rem;align-items:center;position: fixed;top:0;'>
        <div v-for="(item,index) in data.topcategory">
          <div @click="data.changeCategory(item.id)" class='mw-column-style' style='width:0.55rem;height:0.44rem;align-items:center;justify-content: center'>
            <div class="mw-single-line" :class="[item.checked? 'mw-checked' : 'mw-unchecked']" style='z-index:1;width:0.5rem;text-align: center'>{{item.name}}</div>
            <div style="height:0.05rem;width:0.38rem;margin-top:-0.04rem" :style="{backgroundColor:item.checked? '#ffc421' : '#ffffff'}"></div>
          </div>
        </div>
      </div>
    </div>
    <v-backhome enter="userpage"></v-backhome>
  </v-content>


</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({data: 'userpage'}),
      mapRules({store: [{ path: 'userpage' }],need: [{ path: 'userpage' }]}),
    ],
    components: {

    },
    data() {
      return {
        menushow:false
      }
    },
    methods: {

    },

    created() {

    },

    mounted() {
      var that = this
      this.data.needFetch = true
      document.getElementById('mydetail').addEventListener('scroll', () => {
//        console.log(document.getElementById("user_rect").getBoundingClientRect().top)
        if (document.getElementById("user_rect").getBoundingClientRect().top <= -this.GLOBAL.ratio * 3) {
          that.menushow = true
        } else {
          that.menushow = false
        }
      })
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .topcategory {
    z-index:99;position:fixed;top:0;width:3.75rem;overflow-x: scroll;background-color:#ffffff;height:0.44rem;
    background:rgba(255,255,255,1);
    box-shadow:0px 6px 10px 0px rgba(0,0,0,0.04);
  }
  .topcategory::-webkit-scrollbar {
    display: none;
  }

  .topcategoryfollow {
    width:3.75rem;overflow-x: scroll;background-color:#ffffff;height:0.44rem;
    background:rgba(255,255,255,1);
    box-shadow:0px 6px 10px 0px rgba(0,0,0,0.04);
  }
  .topcategoryfollow::-webkit-scrollbar {
    display: none;
  }
  .mw-checked {
    color:#333333;
    font-weight: bold;
    font-size: 0.13rem;
    line-height: 1.5;
  }
  .mw-unchecked {
    color:#999999;
    font-size: 0.13rem;
    line-height: 1.5;
  }

</style>
